<template>
    <div class="login">
        <c-header title="登录" back="home"></c-header>
        <section class="body">
            <TopPrompt :options="topPrompt"></TopPrompt>
            <div class="input_wrap">
                <input v-model="password" name="password" type="text" placeholder="Access Token" maxlength="36" class="txt"> </div>
            <!-- accesstoken -->
            <div class="button_wrap"><span @click="accesstoken" :class="btnLoading && 'g-btnLoading'" class="g-btn">登录</span></div>
        </section>
    </div>
</template>
<script>
import * as API from '../api'
import cHeader from './Header'
import TopPrompt from './TopPrompt'

export default {
    name: 'login',
    data() {
        return {
            btnLoading: false,
            password: '0d45c0d3-697f-45a5-b093-edfb48ec7fb7',
            topPrompt:{
                display:false,
                type: 'error',
                text: '',
                timeout: 3000,
            }
        }
    },

    components: {
        TopPrompt,
        cHeader,
    },

    created() {
        var tthis = this;
    },

    // activated() {},

    methods: {
        showTopPrompt(obj){
            this.topPrompt.display = true;
            this.topPrompt.type = obj.type || this.topPrompt.type;
            this.topPrompt.text = obj.text;
        },
        accesstoken() {
            let tthis = this;
            if (!tthis.btnLoading) {
                tthis.btnLoading = true;
                API.accesstoken({
                    data: {
                        accesstoken: tthis.password
                    },
                    success(data) {
                        if (data.error_msg) {
                            tthis.showTopPrompt({
                                type:'error',
                                text:data.error_msg
                            })
                        }else{
                            data.token = tthis.password;
                            Util.setSessionStorage('myUserInfo', JSON.stringify(data));
                            Util.setSessionStorage('token', JSON.stringify(data.token));
                            // 0d45c0d3-697f-45a5-b093-edfb48ec7fb7
                            tthis.$store.commit('setUserInfo', data);
                            tthis.$router.push({
                                name: 'userProfile',
                                query: { name: data.loginname }
                            })
                        }
                    },
                    complete() {
                        tthis.btnLoading = false;
                    }
                });
            }
        },
        login() {
            let tthis = this;
            if (!tthis.btnLoading) {
                tthis.btnLoading = true;
                API.login({
                    data: {
                        username: 'wells2015',
                        password: '12345678'
                    },
                    success(data) {
                        console.log(data)
                    },
                    complete() {
                        tthis.btnLoading = false;
                    }
                });
            }
        }
    }
}

</script>
<style lang="less" scoped>
.body {
    padding: 0 20px;
}

.input_wrap {
    margin-top: 50px;
}

.input_wrap input[name=password] {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #4fc08d;
    background-color: transparent;
    width: 100%;
    font-size: 14px;
    color: #313131;
}

.button_wrap {
    margin-top: 20px;
}

</style>
